<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />

		<script src="${pageContext.request.contextPath }/statics/calendar/WdatePicker.js"></script>
		<script src="${pageContext.request.contextPath }/statics/calendar/skin/WdatePicker.css"></script>
		<style>
			ul{
				list-style: none;
			}
		</style>
</head>

<div class="center">
			<div class="col-main">
				<div class="main-wrap" style="background-color:white ;">
					<div class="user-logistics">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">忘记密码</strong> / <small>Logistics&nbsp;History</small></div>
						</div>
						<hr/>
						<div class="package-title">
							<div class="m-item">
								<div class="item-pic">
									
								</div>
								
							</div>
                         <div class="clear"></div>
						</div>
						<br>
						<div class="package-status">
						<form action="${pageContext.request.contextPath }/user/judgeQuestion" id="form">
								<ul class="status-list">		
									<li class="latest">
										
										用户账号: <input type="text" name="userCode" id="userCode" value="" placeholder="请输入用户名!!!"/>*
										<span id="a1" style="color:red;" value="1"></span>
									</li>
									<br/>
									<li class="latest">
										
										邮箱: <input type="text" name="userEmail" id="userEmail" value="" placeholder="请输入用户名!!!"/>*
										<span id="a2" style="color:red;" value="1"></span>
									</li>
									<br/>										
									<li>
									安全问题:
										<select data-am-selected name="questionId" id="select">
											<%-- <option value="" selected>请选择安全问题</option>
											<c:forEach var="question" items="${question}">
												<option value="${question.q_id}">${question.questionName}</option>
											</c:forEach> --%>
										</select>
											<span id="a3" style="color:red;" value="1"></span>
										<br/>
										<br/>
										<label for="user-answer2" class="am-form-label">答案: </label>
											<input type="text" id="user-answer2" placeholder="请输入安全问题答案" name="answer" required="required">
											<span id="a4" style="color:red;" value="1"></span>
									</li>
									<br/>
									<li>
										新密码: <input type="text" name="password" id="password" value="" placeholder="请输入6位数新密码!!!"/>*
										<span id="a5" style="color:red;" value="1"></span>
									</li>
									<br/>
									<li>
										<button type="submit" id="submit">注册</button>
										<button id="back">返回</button><span style="color:red;">${error}</span>
									</li>
								</ul>
							</form>
						</div>
					</div>
				</div>
				</div>
</div>
	</body>
	<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery-1.8.3.min.js"></script>
	<script>
		var userCode = $("#userCode");
		var password = $("#password");
		var userEmail = $("#userEmail");
		var questionId = $("#select");
		var answer = $("#user-answer2");
		userCode.on("blur",function(){
			var code = $(this).val();
			if($(this).val == null || $(this).val() == ""){
				$("#a1").val("");
				$("#a1").html("用户名不能为空!!!");
			}else{
				$("#a1").val("1");
				$("#a1").html("");
				$.ajax({
					url : "/Trip/user/getThisQuestion",
					dataType : "json",
					data : {userCode : code},
					type : "POST",
					success : function(data){
						var options = "";
						options += "<option value=\""+data.q_id+"\">"+data.questionName+"</option>";
						$("#select").html(options);
					}
				});
			}
		});
		
		userEmail.on("blur",function(){
			if($(this).val == null || $(this).val() == ""){
				$("#a2").val("");
				$("#a2").html("邮箱不能为空!!!");
			}else{
				$("#a2").val("1");
				$("#a2").html("");
			}
		});
		
		password.on("blur",function(){
			if($(this).val().length != 6 ){
				$("#a5").val("");
				$("#a5").html("密码长度必须为6位!!!");
			}else if($(this).val == null || $(this).val== ""){
				$("#a5").val("");
				$("#a5").html("密码不能为空!!!");
			}else{
				$("#a5").val("1");
				$("#a5").html("");
			}
		});
		
		answer.on("blur",function(){
			if($(this).val() == null){
				$("#a4").val("");
				$("#a4").html("答案不能为空!!!");
			}else{
				$("#a4").val("1");
				$("#a4").html("");
			}
		});
		
	</script>
</html>